<template>
    <div class="newSafe">
        <div class="additem">
            <div class="list">
                <div class="item item1"><i class="iconfont icon-xiangmu"></i>&nbsp;检查项目：</div>
                <select class="item item2 select2" v-model="form.safeCheckcontent">
                    <option value="" disabled selected style='display:none;'>请选择</option>
                    <option v-for="lst in itemsList" :value="lst.value" :key="lst.value">{{lst.name}}</option>
                </select>
            </div>
            <div class="list">
                <div class="item item1">反应内容：</div>
            </div>
            <div class="list">
                <textarea name="" id="" cols="40" rows="10" v-model="form.reactcontent" maxlength="80" style="margin-left:3px;margin-top:1px;"></textarea>
            </div>
            <div class="list">
                <div class="item item1">上传图片：</div>
            </div>
            <div class="list postImg">
                <form class="uploadPicForm clearfix" id="uploadPicForm" enctype="multipart/form-data">
                    <div class="img1 clearfix" v-for="(urls, index) in imgs " :key="urls.value">
                        <div :class="{deleteBtn:!isImg}" class="delete clearfix" v-on:click="deleteImg(index)"><i class="iconfont icon-shanchu"></i></div>
                        <img class="img" :src="urls" />
                    </div>
                    <div class="addimg" v-on:click="imgClick()" v-if="this.files.length<3 && isImg">
                        <i class="iconfont icon-jiahao"></i>
                    </div>
                    <input style="float: left;  display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile($event)">
                </form>
            </div>
        </div>
        <button :class="{btnBg:!isImg}" ref="addSafeBtn" type="button" class="btn btn-block btn-primary" @click="goNext()">添加</button>
    </div>
</template>

<script>
import utils from '@/utils'
import {
    getUserInfo,
    setUserInfo,
    logout
} from '@/utils/auth'
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            itemsList: [],
            imgs: [],
            files: [],
            fileList: [],
            isImg: true,
        }
    },
    computed: mapState([   // 数组
        "form","safeList"
    ]),
    mounted() {
        // console.log(this.safeList)
        this.getItems()
    },
    watch: {
        fileList() {
            this.form.photopath = "";
            this.fileList.forEach(item => {
                this.form.photopath += (item + ',');
            });
            this.form.photopath = this.form.photopath.substr(
                0,
                this.form.photopath.length - 1
            );
        }
    },
    methods: {
        ...mapMutations([
            'addList'
        ]),
        //删除图片
        deleteImg(index) {
            this.imgs.splice(index, 1);
            this.fileList.splice(index, 1);
        },
        //图片click
        imgClick() {
            document.getElementById("uploadFile").click();
        },
        //图片上传
        readLocalFile(e) {
            let localFile = document.getElementById("uploadFile").files[0];
            if (!localFile) {
                return
            }
            //开关控制
            this.isImg = false
            this.$refs.addSafeBtn.disabled = true
            // console.log(this.$refs.addSafeBtn.disabled)

            // console.log(document.getElementById("uploadFile").files)
            this.files.push(localFile)


            //获取图片base64代码
            var reader = new FileReader();
            var content;
            var current = this;
            content = reader.readAsDataURL(localFile, "UTF-8");

            reader.onload = function (event) {
                content = event.target.result;
                current.imgs.push(content);
            }
            reader.onerror = function (event) {
                alert('error')
            }



            //上传
            var formData = new FormData();
            formData.append('file', this.files[this.files.length - 1]);
            // console.log(formData.get("file"))
            this.$api.safe.uploadUrl(formData).then(res => {
                if (res.success) {
                    this.$refs.addSafeBtn.disabled = false
                    this.$$tip({
                        content: '该图片上传成功！'
                    })
                    this.fileList.push(res.data)
                    this.isImg = true
                }
            }).catch(res => {
                console.log(res)
            });;
        },
        //检查项目
        getItems() {
            this.$api.safe.items().then(res => {
                if (res.success) {
                    this.itemsList = res.data
                }
            });
        },
        goNext() {
            if (this.form.safeCheckcontent == '') {
                this.$$tip({
                    content: '检查项目不能为空！'
                })
            } else if (this.form.reactcontent == '') {
                this.$$tip({
                    content: '反应内容不能为空！'
                })
            } else {
                this.form.time1=utils.getDate()
                this.addList()
                this.$router.push({ path: 'tianjia' })
            }
        }
    }
}
</script>

<style lang="less">
</style>

